<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>人流量监管云平台</title>
    <script th:src="@{~/static/bootstrap/js/jquery-3.4.1.min.js}"></script>
    <link th:href="@{~/static/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
    <script th:src="@{~/static/bootstrap/js/bootstrap.js}"></script>
    <link th:href="@{~/static/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{~/static/layui/css/layui.css}" rel="stylesheet"/>
    <!--<script th:src="@{~/static/layui/layui.all.js}"></script>-->
    <script th:src="@{~/static/layer/layer.js}"></script>

    <!--echarts插件-->
    <script th:src="@{~/static/echarts/echarts.min.js}"></script>
    <script th:src="@{~/static/echarts/esl.js}"></script>


</head>



<body style="margin-top: 50px">

<div class="container"><!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="rows">
        <div class="form-inline">
            <label>选择摄像头:</label>
            <select id="camera" name="camera"
                    class="form-control" onchange="changeCamera()">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>号摄像头
            <label id="camera_place" style="padding-left: 10px">摄像头地点:</label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-8">
            <div id="main" style="width: 100%;height:400px;"></div>
        </div>
        <div class="col-sm-6 col-md-3">

            <div class="container">
                <h3 style="font-family: 微软雅黑;padding-left: 50px">摄像头实时图像</h3>
                <img src="" id="cameraPhoto">
                <br><br><br>
                <label id="peopleNum"
                       style="padding-left: 50px;text-align: center; font: bold 20px red 华文楷体">当前人数为</label>
            </div>
        </div>
    </div>

</div>

</body>

<script type="text/javascript">
    var cameraList
    var myChart = echarts.init(document.getElementById('main'));
    showdata()
    getCameraPhoto()
    findAllCamera()


    function findAllCamera() {

        $.ajax({
            type: 'post',
            url: '/camera/allList',
            async: false,
            data: {},
            success: function (result) {
                cameraList = result//全局变量
                var cameras = result;
                $("#camera").empty();
                for (var i in cameras)
                    $("#camera").append(
                        "<option value=" + i + ">"
                        + cameras[i].camera_id
                        + "</option>");
                index = $("#camera").get(0).selectedIndex;
                $("#camera_place").html('摄像头地址为：' + cameraList[index].camera_place)
            },
            error: function () {
                alert("error");
            }
        });
    }

    function changeCamera() {
        index = $("#camera").get(0).selectedIndex;
        $("#camera_place").html('摄像头地址为：' + cameraList[index].camera_place)
        showdata()
        getCameraPhoto()
    }




    function getCameraPhoto() {
        camera_id = $("#camera option:selected").text();
        camera_id_int = parseInt(camera_id)
        // alert(typeof (camera_id_int))
        // parseInt(camera_id)
        $.ajax({
            type: 'post',
            url: '/CameraPeople/CameraPhoto',
            async: false,
            data: {
                'camera_id': camera_id_int,
                'top_num': 1
            },
            success: function (data) {
                src = 'data:image/png;base64,' + data[0].image
                $('#cameraPhoto').attr('src', src)
                $('#peopleNum').html('当前人数为' + data[0].num + '人<br>当前时间为' + data[0].time)

            },
            error: function () {
                alert("网络异常");
            }
        });
    }

    function showdata() {
        camera_id = $("#camera option:selected").text();
        camera_id_int = parseInt(camera_id)
        // alert(typeof (camera_id_int))
        $.ajax({
            type: 'post',
            url: '/CameraPeople/CameraRealTime',
            async: false,
            data: {
                'camera_id': camera_id_int,
                'top_num': 10
            },
            success: function (data) {
                // alert(data)
                xdata = []
                ydata = []
                peopleData = []
                temp = []
                for (var i = 0; i < data.length; i++) {
                    temp.push(data[i].time)
                    temp.push(data[i].num)
                    peopleData.push(temp)
                    temp = []
                }
                console.log(xdata.toString())
                console.log(ydata.toString())
                myChart.setOption({
                    title: {
                        text: '人群监控情况',
                        subtext: '数据来自' + data[0].camera_place + '的' + data[0].camera_id + '号摄像头',
                        x: 'center',
                        align: 'right'
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {onZero: false},


                        axisLabel: {
                            interval: 0,
                            formatter: function (value) {
                                var ret = '';
                                var maxLength = 10;
                                var rowNum = Math.ceil(value.length / maxLength);
                                if (rowNum > 1) {
                                    for (var i = 0; i < rowNum; i++) {
                                        var temp = "";
                                        var start = i * maxLength;
                                        var end = start + maxLength;
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp;
                                    }
                                    return ret;
                                } else {
                                    return value;
                                }
                            }
                        }


                    },
                    grid: {
                        //   left: '10%',
                        // top:'100',
                        bottom: '80'
                    },
                    yAxis: {
                        name: '人流量(人数)',
                        type: "value"
                    },
                    series: [{
                        name: '销量',
                        type: 'line',
                        data: peopleData
                    }],
                    toolbox: {
                        //  left: 'center',
                        orient: 'vertical',
                        right: 50,
                        top: 40,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#505765'
                            }
                        },
                    },
                    dataZoom: [{
                        startValue: '2014-06-01'
                    }, {
                        type: 'inside'
                    }],
                });
            },
            error: function () {
                alert("error");
            }
        });
    }

    setInterval("showdata()", 100) //每隔0.1s更新一次
    setInterval("getCameraPhoto()", 100) //每隔0.1s更新一次

</script>

</html>